<template>
  <base-breadcrumb :title="titleName">
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <a-card :bordered="false">
      <title-name title="项目列表" />
      <div
        class="table-operator"
        style="margin-top:10px"
      >
        <a-button
          v-btnPermission="'pm_007_add_01'"
          type="primary"
          @click="handleAdd"
        >
          新增项目业态
        </a-button>
      </div>
      <div class="pub-table-select-count">
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span style="margin-right: 12px">
          总计：<span class="totalNum">{{ total.totalSize }} 项 </span>
        </span>
      </div>
      <s-table
        ref="table"
        size="default"
        row-key="key"
        :columns="columns"
        :data="loadData"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="status"
          slot-scope="text"
        >
          <a-badge
            :status="text | statusTypeFilter"
            :text="text | statusFilter"
          />
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <a
              v-btnPermission="'pm_007_loo_02'"
              @click="handleView(record,'view')"
            >查看</a>
            <a-divider type="vertical" />
            <a
              v-btnPermission="'pm_007_edi_03'"
              @click="handleSub(record,'edit')"
            >WBS编辑</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-modal
      :confirm-loading="confirmLoading"
      :visible="addVisible"
      ok-text="确 定 新 增"
      width="1000px"
      title="新增项目业态"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        style="margin:20px 0"
        :model="form"
        :rules="rules"
      >
        <a-row>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="项目业态："
              style="display:flex"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
              prop="name"
            >
              <BaseInput
                v-model="form.name"
                placeholder="请输入"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="状态"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
              prop="enabledCode"
            >
              <a-select
                v-model="form.enabledCode"
                :get-popup-container="getPopupContainer"
                placeholder="请选择"
              >
                <a-select-option value="1">
                  可用
                </a-select-option>
                <a-select-option value="0">
                  不可用
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
  import moment from 'moment'
  import { STable, Ellipsis } from '@/components'
  import { getRoleList, getServiceList } from '@/api/manage'
  import { getWbsTemplateList, addWbsTemplateList } from '@/api/template'

  import ARow from 'ant-design-vue/es/grid/Row'

  const columns = [
    {
      title: '序号',
      width:60,
      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '项目业态',
      width:200,
      dataIndex: 'formatName',
    },
    {
      title: '周期天数',
      dataIndex: 'cycleDays',
    },
    {
      title: '一级节点个数',
      dataIndex: 'firstNodeNum',
    },
    {
      title: '二级节点个数',
      dataIndex: 'secondNodeNum',
    },
    {
      title: '三级节点个数 ',
      dataIndex: 'thirdNodeNum',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '状态 ',
      dataIndex: 'statusName',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 100,
      scopedSlots: { customRender: 'action' }
    }
  ]
  const searchArr =[
    // 搜索框
    {
      name: '项目业态',
      value: 'formatName',
      type: 'input'
    },
    {
      name: '状态',
      value: 'statusCode',
      type: 'select',
      data:[
        {
          value: '1',
          label: '可用'
        },
        {
          value: '0',
          label: '不可用'
        }
      ]
    },
  ]
  export default {
    name:'a'+Date.now(),
    components: {
      ARow,
      STable,
    },
    data() {
      this.columns = columns
      this.searchArr = searchArr
      return {
        titleName:'',
        form:{},
        name:'',
        status:'',
        // create model
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        total:'',
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          //   console.log('loadData request parameters:', requestParameters)
          return getWbsTemplateList(requestParameters).then(res => {
            this.total = res
            return res
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        company:[],
        addVisible:false,
        // 校验规则
        rules: {
          name: [{ required: true, message: '请填写项目业态名称', trigger: 'blur' }],
          enabledCode: [{ required: true, message: '请选择状态', trigger: 'change' }],
        },
      }
    },

    created() {
      //   getRoleList({ t: new Date() })
      // this.getWbsTemplateList()
    },
    computed: {
      // rowSelection() {
      //   return {
      //     selectedRowKeys: this.selectedRowKeys,
      //     selectedRows: this.selectedRows,   // 当前行所有数据
      //     onChange: this.onSelectChange
      //   }
      // }
    },
    methods: {
      // 分公司
      getTwoImplementation(){
        // getTwoImplementation({level:2}).then(res=>{
        //   this.company = res.data
        //   console.log("二级所属单位：".res.data)
        // })
      },
      search(values){
        this.queryParam = values
        this.$refs.table.refresh(true)
      },
      // getWbsTemplateList(){
      //   getWbsTemplateList().then(res=>{
      //     this.total = res
      //   })
      // },
      handleOk(){
        this.$refs.ruleForm.validate(valid=>{
          if(valid){
        this.confirmLoading = true
            addWbsTemplateList(this.form).then((res)=>{
                if(res.code='200'){
                  this.confirmLoading=false
                    this.$message.success("新增成功")
                    this.addVisible = false
                    this.$refs.table.refresh(true)
                }
            })
          }
        })
      },
      getPopupContainer(triggerNode){
        return  triggerNode.parentNode
      },
      handleCancel(){
        this.addVisible = false
      },
      searchData(){   // 搜索
        this.$refs.table.refresh(true)
      },
      reset(){
        this.queryParam={}
      },
      deletes(){},
      handleAdd() {
        this.addVisible = true
        this.form = {}
      },
      handleSub(record,type) {
        this.$router.push({
            path:'/project/template',
            query:{
                wbsTemplateId:record.wbsTemplateId,
                type:type
            }
        })
      },
      handleView(record,type){
        this.$router.push({
            path:'/project/template/view',
            query:{
                wbsTemplateId:record.wbsTemplateId,
                type:type
            }
        })
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    }
  }
</script>
<style scoped>
    .ant-modal-body{
        padding:0
    }
    .icon{
        transform: rotate(90deg);
        color:#349ED8
    }
    .selects{
        background-color: #E6F3FC;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: #D4F0FC;
        border-radius: 4px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-size: 12px;
        text-align: left;
        line-height: 18px;
        padding:5px 10px;
    }
</style>
